<template>
    <li>
      <label>
          <!--@click 也可以使用@change事件-->
          <input type="checkbox" :checked="todoObj.completed" @click="handleChange(todoObj.id)"/>
          <!-- <input type="checkbox" v-model="todoObj.completed"/> 修改了props里面的属性, 不推荐 -->
          <span v-show="!todoObj.isEdit">{{todoObj.title}}</span>
          <input ref="inputTitle" type="text" v-show="todoObj.isEdit" :value="todoObj.title" @keyup.enter="confirmEdit(todoObj, $event)" @blur="cancelEdit(todoObj)"/>
      </label>
      
      <button class="btn btn-danger" @click="deleteObj(todoObj.id)">删除</button>
      <button v-show="!todoObj.isEdit" class="btn btn-edit" @click="editObj(todoObj)">编辑</button>
  </li>
  
</template>

<script>
  import pubsub from 'pubsub-js'
  export default {
    name: 'TodoItem',
      props: ['todoObj'],
      methods: {
        handleChange(id) {
          console.log('@@@@'+id)
          // this.handleCheck(id)
          this.$bus.$emit('handleCheck', id)
        }, 
        deleteObj(id) {
          console.log('@@@@'+id)
          if(window.confirm('确定删除吗?')) {
            // this.handleDelete(id)
            // this.$bus.$emit('handleDelete', id)
            pubsub.publish('handleDeleteMsg', id)
          }
        },
        editObj(todoObj) {
          // todoObj.isEdit = true
          // 判断todoObj对象是否有某个属性
          if(todoObj.hasOwnProperty('isEdit')) {
            todoObj.isEdit = true
          } else {
            this.$set(todoObj, 'isEdit', true)
          }
          // this.$refs.inputTitle.focus() // 获取焦点, 但是需要在DOM渲染完毕之后才能获取焦点. 所以需要使用nextTick
          this.$nextTick(() => {
            this.$refs.inputTitle.focus()
          })
        },
        // 失去焦点回调
        confirmEdit(todoObj, e) {
          if(e.target.value.trim().length === 0) {
            alert('输入不能为空')
            return
          }
          todoObj.isEdit = false
          this.$bus.$emit('handleEdit', todoObj.id, e.target.value)
        },
        cancelEdit(todoObj) {
          todoObj.isEdit = false
        }
    },
  }
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }
    li:hover{
      background-color: #f5f5f5;
    }
    li:hover button{
      display: block;
    }
</style>